<!-- File: src/components/FileUpload.vue -->
<template>
  <div class="file-upload"> 
    <h2>文件上传</h2>
    <input type="file" id="file-input" @change="onFileChange" multiple />
    <label for="file-input" class="file-input-label">选择文件</label>
    
    <div class="button-container">
    <button @click="uploadFiles" :disabled="!selectedFiles.length">上传</button>
    <button @click="resetFiles">重置</button>
    </div>

    <table v-if="selectedFiles.length > 0" class="file-table">
      <thead>
        <tr>
          <th>File Name</th>
          <th>File Size</th>
          <th>Upload Progress</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(file, index) in selectedFiles" :key="index">
          <td>{{ file.name }}</td>
          <td>{{ (file.size / 1024).toFixed(2) }} KB</td>
          <td>
            <div class="progress">
              <div class="progress-bar" :style="{ width: file.uploadProgress + '%' }"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-if="fileError" class="error">{{ fileError }}</p>
    <p v-if="uploadStatus" :class="{ 'error': isError, 'success': !isError }">{{ uploadStatus }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      selectedFiles: [],
      uploadProgress: 0,
      uploadStatus: '',
      fileError: '',
      isError: false
    };
  },
  methods: {
    onFileChange(event) {
      const files = event.target.files;

      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        
        const reader = new FileReader();
        reader.onloadstart = () => {
          this.selectedFiles.push({
            file: file,
            name: file.name,
            size: file.size,
            isImage: file.type.startsWith('image/'),
            uploadProgress: 0,
            preview: ''
          });
        };

        reader.onload = (e) => {
          const isImage = file.type.startsWith('image/');
          const fileIndex = this.selectedFiles.findIndex(f => f.file === file);
          this.selectedFiles[fileIndex].preview = isImage ? e.target.result : '';
        };

        if (file.type.startsWith('image/')) {
          reader.readAsDataURL(file);
        } else {
          reader.readAsText(file);
        }
      }
    },
    async uploadFiles() {
      if (this.selectedFiles.length === 0) {
        this.uploadStatus = 'No files selected.';
        this.isError = true;
        return;
      }

      const formData = new FormData();
      this.selectedFiles.forEach(fileObj => {
        formData.append('file', fileObj.file);
      });

      try {
        const response = await axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: progressEvent => {
            console.log('Upload Progress: ' + Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%');
            this.uploadProgress = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            this.selectedFiles.forEach(fileObj => {
              fileObj.uploadProgress = this.uploadProgress;
            });
          }
        });

        if (response.status === 200) {
          this.uploadStatus = '文件上传成功!';
          this.isError = false;
        } else {
          this.uploadStatus = '文件上传失败.';
          this.isError = true;
        }
      } catch (error) {
        this.uploadStatus = '文件上传失败.';
        this.isError = true;
      } finally {
        this.uploadProgress = 0;
      }
    },
    resetFiles() {
      this.selectedFiles = [];
      this.uploadStatus = '';
      this.fileError = '';
      this.isError = false;
      this.uploadProgress = 0;
    }
  }
};
</script>

<style scoped>
.file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 20px;
  padding: 20px;
  border: 2px dashed #00ffcc;
  border-radius: 10px;
  background: linear-gradient(145deg, #1c1c1c, #121212);
  box-shadow: 5px 5px 10px #0a0a0a, -5px -5px 10px #262626;
  color: #00ffcc;
}

h2 {
  margin-bottom: 20px;
  color: #00ffcc;
  text-shadow: 0px 0px 10px #00ffcc;
}

input[type="file"] {
  display: none;
}

.file-input-label {
  padding: 10px 20px;
  background-color: #00ffcc;
  color: #1c1c1c;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0px 5px 15px rgba(0, 255, 204, 0.5);
}

.file-input-label:hover {
  background-color: #00cc99;
  transform: translateY(-2px);
}

button {
  padding: 10px 20px;
  background-color: #00cc66;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3s;
  box-shadow: 0px 5px 15px rgba(0, 204, 102, 0.5);
  margin-right: 10px; /* 添加此行以在按钮之间添加间距 */
}

button:disabled {
  background-color: #333;
  cursor: not-allowed;
}

button:not(:disabled):hover {
  background-color: #009944;
  transform: translateY(-2px);
}

.file-table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

.file-table th, .file-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #00ffcc;
  color: #00ffcc;
}

.file-table th {
  background: #1c1c1c;
  text-shadow: 0px 0px 10px #00ffcc;
}

.progress {
  width: 100%;
  background-color: #333;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 5px 5px 10px #0a0a0a, -5px -5px 10px #262626;
}

.progress-bar {
  height: 20px;
  background-color: #00ffcc;
  transition: width 0.4s;
}

p {
  margin: 0;
  padding: 10px 0;
}

.success {
  color: #00cc66;
}

.error {
  color: #ff3366;
}

.button-container {
    display: flex;
    justify-content: space-between;
    width: 200px;  /* 根据需要调整 */
}
</style>
